﻿@{
    ViewBag.Title = "MyAccount";
    
}

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<link href="../../Content/Styles/button.css" rel="stylesheet" type="text/css" />
<link href="../../Content/Styles/page.css" rel="stylesheet" type="text/css" />  
 <link href="../../Content/Styles/ErrorStyle.css" rel="stylesheet" type="text/css" />
@model HomeStayWebCP.Models.BusinessObject.UserObject
<script type="text/javascript">
    jQuery(document).ready(function() {
        jQuery(".content").show();
        //jQuery(".content").hide();
        //toggle the componenet with class msg_body
        jQuery(".heading").click(function() {
            jQuery(this).next(".content").slideToggle(500);
        });
    });
</script>
<style>
    #container
            {
                background-color: white;
                min-height: 600px !important;
       
            }
    #headbox
    {
        height: 30px;
        background-color: #c30;
        color:#blanchedalmond
        text-align: left;
        font-size: 1.5em;
        padding-left: 10px;
        color: white;
        padding-top: 5px;
        border-radius: 6px;
    }
    .leftlabel
    {
        float: left;
        width: 150px;
        margin-top: 10px;
        margin-left: 10px;
        font-size: 1.1em;
        color: black;
        margin-right: 10px;
    }
    .editor-field
    {
        float: left;
        margin-top: 10px;
        margin-left: 10px;
        width: 150px;
        
    }
    .field
    {
        clear: both;
        width: 500px;
    }
    .field-validation-error
    {
        color: red;
        width: 220px;
    }
    input, textarea
    {
        color: black;
    }
    #userinfo
    {
        width: 550px;
        height: 600px;
        margin-left: 500px;
        margin-top: 1px;
        padding: 10px;
    }
   
    .heading
    {
        margin: 1px;
        color: #fff;
        padding: 3px 10px;
        cursor: pointer;
        position: relative;
        background-color: gray;
        height: 22px;
        
    }
    .content
    {
        padding: 5px 10px; /*background-color: #fafafa;*/
    }
    .success {
        height: 8px;
        border-radius: 5px;
        margin-left: 200px;
       
    }
</style>
<div class="detailcontainer" style="height: 600px">
                 <div id="headbox" class="rounded-corners">Update Account Information</div>
 @if (HttpContext.Current.Session["username"] != null)
     
 {          <div id="changepass" style="float: left;width: 540px">
            <p class="heading">Change Password </p>
            <div class="content">
            <div class="field" >
                <span class="leftlabel"> Old PassWord(*)</span>
                <div class="editor-field">
                    @Html.PasswordFor(model => model.OldPassword, new{style = "width: 240px;"})
                    <span class="field-validation-error"></span>
                </div>
                
               @Html.HiddenFor(model => model.Password)
            </div>
            <div class="field" id="newpass">
                <span class="leftlabel">New PassWord(*)</span>
                <div class="editor-field">
                    @Html.PasswordFor(model => model.NewPassword, new { style = "width: 240px;" })
                     <span class="field-validation-error"></span>
                </div>
             </div>
            <div class="field"  id="retypepass">
                <span class="leftlabel">Retype PassWord(*)</span>
                <div class="editor-field">
                    @Html.PasswordFor(model => model.RetypePassword, new { style = "width: 240px;" })
                     <span class="field-validation-error"></span>
                </div>
            </div>
          
                     
             <button class="small button green" style="width: 150px; color: white;height: 30px;margin-left: 180px;" id="changebtn">Change Password</button>
             <div class="success" id="changestatus" style="float: left;display: none;margin-left: 170px;margin-top: 20px;
}"></div>
            </div>
            </div>
    
     //using (Html.BeginForm("EditAccount", "Users", FormMethod.Post, new { enctype = "multipart/form-data", id = "formReg" }))
     using (Html.BeginForm("MyAccount", "Users", FormMethod.Post, new { enctype = "multipart/form-data", id = "formaccount" }))
     {
             @Html.ValidationSummary(true)

             <div id="info" style="width: 600px;float: right">
              <p class="heading">Change Information </p> 
                 <div class="content">
                
                     <div class="field">
                         <span class="leftlabel">UserName</span>
                         <div class="editor-field">
                             @Html.TextBoxFor(model => model.Username, new { @readonly = "true", style = "width: 240px;" })
                             @Html.ValidationMessageFor(model => model.Username)
                         </div>
                     </div>
                     <div class="field">
                         <span class="leftlabel"> Fullname(*)</span>
                         <div class="editor-field">
                             @Html.TextBoxFor(model => model.Fullname, new { style = "width: 240px;" })
                             @Html.ValidationMessageFor(model => model.Fullname, "")
                         </div>
                     </div>
                     <div class="field">
                         <span class="leftlabel">AvatarPicture</span>
                         <img alt="#" src="../../Content/images/AvatarUser/@Model.AvatarPicture" style="width: 100px; height: 100px; float: left; margin-left: 10px;"/>
                         @Html.HiddenFor(model => model.AvatarPicture)
                         <div class="editor-field">
                             <input type="file" name="test" />
                         </div>
                     </div>
                     <div class="field">
                         <span class="leftlabel">Gender</span>
                         <div class="editor-field">
                           @Html.DropDownListFor(model => model.Gender, (IEnumerable<SelectListItem>)ViewBag.GenderList)
                         </div>
                     </div>
                     <div class="field">
                         <span class="leftlabel">Email(*)</span>
                         <div class="editor-field">
                             @Html.TextBoxFor(model => model.Email, new { style = "width: 240px;", @readonly = "true" })
                             @Html.ValidationMessageFor(model => model.Email)
                         </div>
                     </div>
                     <div class="field">
                         <span class="leftlabel">Address(*)</span>
                         <div class="editor-field">
                             @Html.TextBoxFor(model => model.Address, new { style = "width: 240px;" })
                             @Html.ValidationMessageFor(model => model.Address)
                         </div>
                     </div>
                     <div class="field">
                         <span class="leftlabel">Phone(*)</span>
                         <div class="editor-field"> 
                             @Html.TextBoxFor(model => model.Phone, new { style = "width: 240px;" })
                             @Html.ValidationMessageFor(model => model.Phone)
            
                         </div>
                     </div>
                     @Html.HiddenFor(model => model.Password, new { style = "width:140px" })
                     <div class="field" style="padding-left: 180px; padding-top: 10px">
                         <p>
                             <input class="small button green"  type="submit"  value="Update" style="float: left; margin-right: 10px; width: 100px; color: white;height: 30px" id="submitbtn"/>
                             <input class="small button green" type="reset" value="Reset" style="width: 100px; color: white;height: 30px" id="resetbtn"/>
                         </p>
                     </div>
                     @if(ViewBag.Message!=null)
                     {
                         <div class="success" style="float: left;">@ViewBag.Message</div>
                     }
                  
                 </div>
             </div>

     } //begin form



 }

 else
 {
     <h3>Please login to edit your account</h3>
 }
 </div>
<script type="text/javascript">
    $(document).ready(function () {
        $('#resetbtn').click(function () {
            $('#Fullname').val('');
            $('#Address').val('');
            $('#Phone').val('');
        });

        $('#changebtn').click(function () {
            var check = true;
            var filter = /^[a-zA-Z0-9]{6,20}$/;
            var oldpass = $('#OldPassword').val();
            var newpass = $('#NewPassword').val();
            var retypepass = $('#RetypePassword').val();
            var spanoldpass = $('#OldPassword').next('span');
            var spannewpass = $('#NewPassword').next('span');
            var spanretypepass = $('#RetypePassword').next('span');
            if (retypepass != newpass) {
                $(spanretypepass).css('display', 'block');
                $(spanretypepass).css('color', 'red');
                $(spanretypepass).html('Retype pass not match new pass');
                check = false;
            } else {
                $(spanretypepass).css('display', 'none');

            }
            if (!filter.test(newpass)) {
                $(spannewpass).css('display', 'block');
                $(spannewpass).css('color', 'red');
                $(spannewpass).html('Pass just contain 6 to 20 character');
                check = false;
            } else {
                $(spannewpass).css('display', 'none');
            }
            if (oldpass == "") {
                $(spanoldpass).css('display', 'block');
                $(spanoldpass).css('color', 'red');
                $(spanoldpass).html('Input Old Pass');
                check = false;
            } else {
                $(spanoldpass).css('display', 'none');
            }
            if (check == true) {
                $.ajax({
                    url: "/Users/ChangePass",
                    type: 'POST',
                    data: { oldpass: oldpass, newpass: newpass },
                    async: false,
                    success: function (response) {
                        //alert(response);
                        if (response == "WrongPass") {

                            $(spanoldpass).html("Old password is wrong");
                            $(spanoldpass).css('color', 'red');
                            $(spanoldpass).css("display", "block");
                            check = false;
                        }
                        else {
                            if (response == "Ok") {
                                $('#changestatus').css('display', 'block');
                                $('#changestatus').html('Change Password successfully');
                                $(spanoldpass).css("display", "none");
                                $('#OldPassword').val("");
                                $('#NewPassword').val("");
                                $('#RetypePassword').val("");

                            } else {
                                $(spanoldpass).html("Can not change Pass,try again!");
                                $(spanoldpass).css('color', 'red');
                                $(spanoldpass).css("display", "block");
                                check = false;
                            }
                        }
                    }

                });
            }

        });






    });
   
</script>